<template>
    <div>
        <!-- 最上面的标题 -->
        <div class="photoInfo-contain">
            <div class="photoInfo-title">{{photoinfo.title}}</div>
            <div class="photoInfo-body">
                <span>发表时间：{{ photoinfo.add_time | dateFormat }} </span>
                <span>点击{{ photoinfo.click }}次</span>
            </div>
            <hr>
        </div>

        <!-- 缩略图 -->
        <div class="thumbs">
            <vue-preview :slides="list"></vue-preview>
        </div>


        <!-- 简介 -->
        <div class="photoInfo-content" v-html="photoinfo.content"></div>

        <!-- 评论组件 -->
        <com-box :parentsData="id"></com-box>
    </div>
</template>


<script>
    //导入评论子组件
    import comment from '../subcomponents/comment.vue';

    export default {
        data() {
            return {
                photoinfo: {},   //图片详情对象
                id: this.$route.params.id,
                list: []         //图片数组
            }
        },
        created() {
            this.getphotoInfo();
            this.getphotoList();
        },
        methods: {
            getphotoInfo() {
                this.$http.get("api/getimageInfo/" + this.id).then(result => {
                    this.photoinfo = result.body.message[0];
                })
            },
            getphotoList() {
                this.$http.get("api/getthumimages/" + this.id).then(result => {
                    console.log(result.body);
                    this.list = result.body.message.forEach(item => {
                        item.w = 600;
                        item.h = 400;
                        item.src = item.src;
                        item.msrc = item.src;
                    });
                    this.list = result.body.message;
                })
            }
        },
        components: {    //评论子组件
            'com-box': comment
        }

    }
</script>


<style lang="scss" scoped>
    .photoInfo-contain {
        padding: 3px;
        .photoInfo-title {
            font-size: 15px;
            color: #26a2ff;
            text-align: center;
            margin: 15px 0;
        }
        .photoInfo-body {
            font-size: 13px;
            display: flex;
            justify-content: space-between;
            color: #8f8f94;
            line-height: 30px;
        }
    }

    .photoInfo-content {
        font-size: 13px;
        padding: 3px;
    }

    .thumbs {   //配置缩略图
        /deep/ .my-gallery {
            display: flex;
            flex-wrap: wrap;
            figure {
                width: 30%;
                margin: 5px;
                box-shadow: 0 0 9px #999;
                img {
                    width: 100%;
                }
            }
        }
    }
</style>

